<template>
  <div class="order-details">
    <div class="product-float">
      <div class="product-record-btn" @click="onExchangeRecord">兑换记录</div>
    </div>
    <div class="details__header">
      <div class="details__header-img">
        <img
          class="details__header-img"
          :src="`${imgPrefix}${order.headerImgUrl}`"
        />
      </div>

      <div class="details__header-title">
        <div class="details__header-top">{{ order.productName }}</div>
        <div class="details__header-bottom">
          兑换时间：{{ formateDate(order.exchangeTime) }}
        </div>
      </div>
    </div>

    <div class="details__row">
      <div class="details__num">
        有效期至：{{ formateDate(order.expireTime) }}
      </div>
      <div
        v-if="order.productType === 2"
        class="details__btn"
        @click="onBinding(order)"
      >
        {{ getBindingBtnText(order) }}
      </div>
    </div>
    <div v-if="order.productType !== 2" class="details__row">
      <div class="details__num">
        券号：{{ order.keyt || getCodeText(order) }}
      </div>
      <div class="details__btn" @click="onCopy(order)">
        {{ getCopyBtnText(order) }}
      </div>
    </div>

    <div class="details__content">
      <div class="details__content-box">
        <div class="details__content-text-title">服务细则</div>
        <div
          class="details__content-text-content"
          v-html="order.serviceText"
        ></div>
      </div>
    </div>
    <van-popup round v-model:show="isBindingPopupVisble">
      <div class="binding-popup">
        <div class="binding-popup-title">绑定</div>
        <div class="binding-row">
          <div class="binding-icon">
            <img
              class="binding-icon__phone"
              src="../../assets/home-phone-icon.png"
            />
          </div>

          <input
            class="binding-input"
            type="text"
            placeholder="请输入充值账号"
            v-model="acount"
          />
        </div>
        <div class="binding-popup-action">
          <div class="binding-popup-btn" @click="onCancelBinding">取消</div>
          <div class="binding-popup-btn" @click="onConfirmBinding">确认</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { reactive, toRef, onMounted } from 'vue'
import { Toast } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import api from '@/api'
import { formateDate } from '@/utils'
import useCopy from './hooks/useCopy'
import globalVariables from '@/utils/globalVariables'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    const { copy } = useCopy()
    // const order = {
    //   id: 1,
    //   productName: '京东PLUS会员季卡',
    //   orderCode: 'JD1239862848',
    //   exchangeTime: '2021年11月25日',
    //   expireTime: '2021年01月25日 09:40:52',
    //   headerImgUrl: require('../../assets/details-JD.png'),
    //   productType: 2,
    //   status: 0,
    //   serviceText: ` 1、会员权益一经兑换不可退换，请在兑换码有效期内完成绑定和使用。。
    //       2、京东PLUS会员季卡兑换码自领取之日起3个月内有效，具体日期可前往“兑换记录”页面查询。
    //       3、使用流程：复制券码后，请前往京东APP-“我的”-“PLUS会员”-“立即购买/立即续费“，完成PLUS会员购买，购买时请选择”更多服务“中的”兑换码购买“方式。
    //       4、若您已是会员身份，此次获得的会员权益绑定成功后将在当前会员身份结束时间上延续3个月。
    //       5、为保证PLUS会员能享受到极优的服务体验，京东PLUS会员仅面向已实名，综合分高于90分且未达到续费上限的个人用户开放。京东PLUS会员的兑换规则以京东官方公布、京东APP显示为准。
    //       6、京东PLUS会员到期天数低于486天时，兑换码方能成功绑定至京东账户。若因PLUS会员到期天数高于486天导致的绑定失败，服务商无法进行退换。7、京东PLUS会员权益的具体内容，以京东官方公布、京东APP显示为准。
    //       8、兑换及使用相关问题，请致电橙谊科技客服电话4000-769-669。客服工作时间为9:00-18:00（包含周六日）。`
    // }
    const order = {}
    const data = reactive({
      order,
      isBindingPopupVisble: false,
      acount: ''
    })

    const onBinding = order => {
      if (order.status !== 2) {
        Toast('当前订单状态不可用')
        return
      }

      data.isBindingPopupVisble = true
    }

    const onCopy = order => {
      if (order.status !== 4) {
        Toast('当前订单状态不可用')
        return
      }
      copy(order.keyt)
    }

    const onCancelBinding = () => {
      data.isBindingPopupVisble = false
    }
    const onConfirmBinding = async () => {
      if (!data.acount) {
        Toast('请输入充值账号')
        return
      }
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(data.acount)) {
        Toast('请填写正确的手机号码')
        return
      }

      data.isBindingPopupVisble = false
      const res = await api.recharge({
        orderId: data.order.id,
        rechargeAccount: data.acount
      })
      if (res.error) {
        Toast(res.error.message)
        return
      }
      Toast('绑定成功')
      router.push({ path: '/binding' })
    }

    const getBindingBtnText = order => {
      let text = ''
      switch (order.status) {
        case 2:
          text = '绑定'
          break
        case 3:
          text = '充值中'
          break
        case 4:
          text = '已完成'
          break
        case 7:
          text = '已取消'
          break
        default:
          text = '充值中'
          break
      }
      return text
    }
    const getCopyBtnText = order => {
      let text = ''
      switch (order.status) {
        case 2:
          text = '提取中'
          break
        case 3:
          text = '提取中'
          break
        case 4:
          text = '复制'
          break
        case 7:
          text = '已取消'
          break
        default:
          text = '提取中'
          break
      }

      return text
    }
    const getCodeText = order => {
      let text = ''
      switch (order.status) {
        case 2:
          text = '努力提取中...'
          break
        case 3:
          text = '努力提取中...'
          break
        case 5:
          text = '提取中...'
          break
        case 6:
          text = '提取中...'
          break
        case 7:
          text = '已取消'
          break
        default:
          break
      }

      return text
    }

    const getOrderByCode = async () => {
      const res = await api.getOrderByCode({
        orderCode: route.query.orderCode
      })
      if (res.error) {
        Toast(res.error.message)
        return
      }
      document.title = res.data.productName
      data.order = res.data
    }

    const onExchangeRecord = () => {
      router.push({ path: '/order' })
    }

    onMounted(async () => {
      document.title = '订单详情'
      getOrderByCode()
    })

    return {
      order: toRef(data, 'order'),
      isBindingPopupVisble: toRef(data, 'isBindingPopupVisble'),
      acount: toRef(data, 'acount'),
      imgPrefix: globalVariables.imgPrefix,
      formateDate,
      getBindingBtnText,
      getCopyBtnText,
      getCodeText,
      onCopy,
      onBinding,
      onCancelBinding,
      onConfirmBinding,
      onExchangeRecord
    }
  }
}
</script>
<style lang="less" scoped="scoped">
.order-details {
  min-height: 100vh;
  background-color: #ececec;
  display: flex;
  flex-direction: column;
  .product-float {
    position: absolute;
    top: 4px;
    right: 0;
    .product-record-btn {
      width: 64px;
      height: 24px;
      background-image: url(../../assets/product-float-btn.png);
      background-size: 140% 100%;

      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;

      box-sizing: border-box;
      padding: 4px 0 0 10px;
    }
  }
  .details__header {
    .details__header-img {
      width: 375px;
      height: 195px;
    }
    .details__header-title {
      position: relative;
      border-radius: 5px 5px 0px 0px;
      background-color: #fff;
      margin-top: -25px;
      display: flex;
      flex-direction: column;
      .details__header-top {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #121212;
        margin: 10px 0 0 21px;
      }
      .details__header-bottom {
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 4px 0 10px 21px;
      }
    }
  }
  .details__row {
    height: 32px;
    font-size: 13px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    background: #ffffff;
    padding-left: 21px;
    margin-top: 5px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .details__num {
    }
    .details__btn {
      width: 63px;
      height: 18px;
      border-radius: 9px;
      background: linear-gradient(-4deg, #ebd9c0, #efb26d);
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.67),
        0px 1px 0px 0px rgba(255, 255, 255, 0.96);

      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 13px;
    }
  }
  .details__content {
    flex: 1;
    background-color: #ececec;

    display: flex;
    flex-direction: column;

    .details__content-box {
      flex: 1;
      margin: 6px 11px 0 11px;
      background-color: #fff;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      .details__content-text-title {
        margin: 13px 0 0 17px;
        font-size: 14px;
        color: #121212;
        font-weight: bold;
      }
      .details__content-text-content {
        font-size: 11px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 17px;
        margin: 10px 17px 17px 15px;

        p {
          margin: 0;
          padding: 0;
          margin-bottom: 4px;
        }
      }
    }
  }

  .binding-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 347px;
    height: 282px;
    background-image: url(../../assets/product-dialog-back.png);
    background-size: 100% 100%;
    .binding-popup-title {
      font-size: 17px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      margin-top: 89px;
    }
    .binding-row {
      margin-top: 25px;
      display: flex;
      width: 262px;
      height: 41px;
      border: 1px solid #666666;
      border-radius: 5px;
      .binding-icon {
        min-width: 43px;
        .binding-icon__phone {
          width: 13px;
          height: 20px;
          margin-top: 11px;
          margin-left: 24px;
        }
        .binding-icon__verify {
          width: 17px;
          height: 16px;
          margin-top: 13px;
          margin-left: 22px;
        }
      }

      .binding-input {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        flex: 1;

        border: 0px;
        outline: none;
      }
    }
    .binding-popup-action {
      margin-top: 35px;
      display: flex;
      justify-content: space-between;
      width: 255px;
      .binding-popup-btn {
        width: 110px;
        height: 36px;
        border-radius: 18px;
        background: linear-gradient(-4deg, #ebd9c0, #efb26d);
        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.67),
          0px 1px 0px 0px rgba(255, 255, 255, 0.96);

        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
